<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<base href="/">
<title>Log In &amp; Sign Up Form - Responsive</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- description -->
<meta name="description" content="Log In &amp; Sign Up Form - Responsive Template">
<link rel="shortcut icon" href="login/images/favicon.ico">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="login/css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/login/css/all.css">
<!-- Reset CSS -->
<link rel="stylesheet" href="login/css/reset.css">
<!-- Style CSS -->
<!--<link rel="stylesheet" href="login/css/style.css">-->
<!-- Responsive  CSS -->
<link rel="stylesheet" href="login/css/responsive.css">
</head>
<body>

<div class="popup-bg"></div>

<div class="header-title">
	<div class="container">
		<h1 class="text-white">Login / Signup Modal Popup</h1>
	</div>
</div>

<div class="popup-login-signup">
	<div class="container">
		<div class="row">
			<div class="col-lg-12 text-center">
				<button type="button" class="btn-tip" data-toggle="modal" data-target="#exampleModalCenter">
					Login / Signup
				</button>
			</div>
			<!-- Modal -->
			<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered" role="document">
					<div class="modal-content">
						<nav class="tab-bar-top">
							<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
								<a class="nav-item nav-link active" id="nav-login-tab" data-toggle="tab" href="#nav-login" role="tab" aria-controls="nav-login" aria-selected="true">Login</a>
								<a class="nav-item nav-link" id="nav-signup-tab" data-toggle="tab" href="#nav-signup" role="tab" aria-controls="nav-signup" aria-selected="false">Signup</a>
							</div>
						</nav>
						<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
							<div class="tab-pane fade show active" id="nav-login" role="tabpanel" aria-labelledby="nav-login-tab">
								<form class="form-login-signup" >
									<div class="form-label-group">
										<input type="email" id="inputEmail" name="username" class="form-control" placeholder="Email address" required autofocus>
										<label for="inputEmail"></label>
									</div>

									<div class="form-label-group">
										<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
										<label for="inputPassword"></label>
									</div>
									<div class="custom-control custom-checkbox mb-3">
										<input type="checkbox" class="custom-control-input" id="customCheck1">
										<label class="custom-control-label" for="customCheck1">Remember password</label>
									</div>
									<button class="loginbtn" type="button">Login</button>
									<hr class="my-4">
<!--									<button class="btn btn-lg btn-google btn-block soi-hv text-uppercase" type="submit"><i class="fab fa-google mr-2"></i> Sign in with Google</button>-->
<!--									<button class="btn btn-lg btn-facebook btn-block soi-hv  text-uppercase" type="submit"><i class="fab fa-facebook-f mr-2"></i> Sign in with Facebook</button>-->
								</form>
							</div>
							<div class="tab-pane fade" id="nav-signup" role="tabpanel" aria-labelledby="nav-signup-tab">
								<form class="form-login-signup layui-form" lay-filter="registerForm">
									<div class="form-label-group">
										<input type="text" id="inputUserame" class="form-control" placeholder="Username" required autofocus lay-verify="required|username" name="username">
										<label for="inputUserame"></label>
									</div>



									<div class="form-label-group">
										<input type="password" id="inputPassword-1" class="form-control" placeholder="Password" required lay-verify="required|password" name="password">
										<label for="inputPassword-1"></label>
									</div>

									<div class="form-label-group">
										<input type="password" id="inputConfirmPassword" class="form-control" placeholder="Confirm password" required lay-verify="required|password|confirm" name="comfirmpassword">
										<label for="inputConfirmPassword"></label>
									</div>

									<div class="custom-control custom-checkbox mb-3">
										<input type="checkbox" class="custom-control-input" id="customCheck2">
										<label class="custom-control-label" for="customCheck2">I Agree To The Terms & Conditions</label>
									</div>

									<button class="btn btn-lg btn-primary btn-block btn-color-hover text-uppercase" lay-submit lay-filter="registerBtn">Register</button>
									<hr class="my-4">
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>


<!-- jquery latest version -->
<script src="login/js/jquery.min.js"></script>
<!-- popper.min.js -->
<script src="login/js/popper.min.js"></script>
<!-- bootstrap js -->
<script src="login/js/bootstrap.min.js"></script>

<script src="layui/layui.all.js"></script>
<script>
	//登录
	const $=layui.$;
	const form=layui.form;
	const layer=layui.layer;
	$(".loginbtn").click(function(){
		console.log("11111");
		//验证数据
		let username=$("[name='username']").val();
		let password=$("[name='password']").val();
		let reg=/^[a-zA-Z0-9]{6,16}$/;
		if(reg.test(username)&&reg.test(password)){
			//登陆操作
			$.ajax({
				url:'shopping/dologin',
				data:{username:username,password:password},
				success:function(result){
					if(result.code==200){
						layer.msg("登录成功",{icon:1});
						setTimeout(function(){
							location.href="shopping/index";
						},1800)
					}else{
						layer.msg("登陆失败");
					}
				}
			});
		}else{
			layer.msg("用户名和密码必须是6-16位字符数字");
		}
	});



	//注册
	const regg=/^[a-zA-Z0-9]{6,16}$/;
	form.verify({
		username:function(val,item){
			//验证格式是否正确
			if(!regg.test(val)){
				return "用户名必须是6-16位字母数字下划线"
			}
			//不能重复
			let isOK=true;
			$.ajax({
				url:'user/getuserbyusername',
				data:{username:val},
				async:false,
				success:function(result){
					console.log(result);
					if(result.data==null){
						isOK=true;
					}else{
						isOK=false;
					}
				}
			});
			if(!isOK){
				return "账号已经被注册,请重新编辑";
			}
		},
		password:function(val,item){
			//验证格式是否正确
			if(!regg.test(val)){
				return "密码必须是6-16位字母数字下划线"
			}
		},
		confirm:function(val,item){
			//密码和确认密码是否一样
			let pass=$("[name='password']").val();
			if(val!=pass){
				return "两次输入的密码不一致";
			}
		},
	});
	form.on("submit(registerBtn)",function(obj){
		//表单验证成功后执行
		let formdata=obj.field;
		/*let btn=obj.elem;//提交按钮
		$(btn).prop("disabled",true);//设置按钮不可用*/
		$.ajax({
			url:"user/register",
			type: "POST",
			data:formdata,
			success:function(result){
				let code=result.code;
				let msg=result.msg;
				if(code!=200) {
					layer.msg(msg, {icon: 2});
				}else{
					layer.msg(msg, {icon: 1,time:3000});
					setTimeout(function(){
						location.href="shopping/login";
					},3000)
				}
			},
			error: function(xhr, status, error) {
				console.error("注册请求失败:", error);
				layer.msg("注册请求失败，请稍后重试", {icon: 2});
			}
		});
		return false;
	});

</script>



</body>
</html>